<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实践详情与报名</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .main-content { padding: 20px; }
        .practice-details, .enrollment-form { max-width: 700px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .practice-details h1 { margin-top: 0; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input, .form-group textarea { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;}
        .btn-submit { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; }
        .btn-submit:hover { background-color: #218838; }
        .alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; }
        .alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
        .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
        .alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container">
        <div class="practice-details" th:if="${practice != null}">
            <h1 th:text="${practice.title}">Practice Title</h1>
            <p><strong>所属课程:</strong> <span th:text="${practice.courseName}"></span></p>
            <p><strong>实践时间:</strong> <span th:text="${#temporals.format(practice.practiceTime, 'yyyy-MM-dd HH:mm')}"></span></p>
            <p><strong>实践地点:</strong> <span th:text="${practice.location}"></span></p>
            <p><strong>任务内容:</strong></p>
            <p th:text="${practice.content}" style="white-space: pre-wrap;"></p>
        </div>
        <hr/>
        <div class="enrollment-form">
            <h3>报名参加</h3>
            <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
            <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

            <form th:action="@{/student/practice/enroll}" th:object="${enrollment}" method="post">
                <input type="hidden" name="practiceId" th:value="${practice.id}" />
                <div class="form-group">
                    <label for="enrollmentName">您的姓名:</label>
                    <input type="text" id="enrollmentName" th:field="*{enrollmentName}" required/>
                </div>
                <div class="form-group">
                    <label for="enrollmentPhone">您的电话:</label>
                    <input type="tel" id="enrollmentPhone" th:field="*{enrollmentPhone}" required/>
                </div>
                <div class="form-group">
                    <label for="notes">备注 (可选):</label>
                    <textarea id="notes" th:field="*{notes}" rows="3"></textarea>
                </div>
                <button type="submit" class="btn-submit" th:if="${practice.status == '进行中'}">确认报名</button>
                <div th:if="${practice.status != '进行中'}" class="alert alert-warning" th:text="'抱歉，该活动已' + ${practice.status} + '，无法报名。'"></div>
            </form>
        </div>
    </div>
</div>
</body>
</html>